<template>
    <div class="layout">
        <header class="layout-header">
            <el-row>
                <el-col :span="4">
                    <h3>学测先锋管理系统</h3>
                </el-col>
                <el-col :span="4" :offset="16">
                    <div class="box">
                        <div class="login1" v-if="!isLogin">
                            <router-link to="/login">
                                <el-icon>
                                    <HelpFilled />
                                </el-icon>
                                <span>登录</span>
                            </router-link>
                        </div>
                        <div class="user" v-else>
                            <router-link to="/admin">
                                <span>{{ nickName }}</span>
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                            </router-link> | <button @click="logoutFn">退出</button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </header>
        <main>
            <el-row>
                <el-col :span="4">
                    <aside>
                        <!--侧栏菜单  -->
                        <MyMenu></MyMenu>
                    </aside>
                </el-col>
                <el-col :span="20">
                    <section>
                        <TopBar></TopBar>
                        <!-- 内容区域 (二级路由出口)-->
                          <router-view></router-view>
                    </section>
                </el-col>
            </el-row>
        </main>

        <!-- 退出登录提示对话框 -->
        <el-dialog v-model="dialogVisible" width="500">
            <span>您要退出登录吗？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="comfirFn">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>



<style lang="scss">
$minHeight: 1000px;
$wzColor: #99A9BF;
@import './common/variable.scss';

.layout {
    background-color: $clColor;
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;

    .layout-header {

        width: 100%;

        background-color: $bgColor;
        color: $wzColor;
        padding: 20px 20px;

        .box {
            text-align: left;

            button {
                background-color: transparent;
                color: $wzColor;
                font-size: 16px;
                cursor: pointer;
            }

            .el-icon,
            span {
                vertical-align: middle;
            }

            .el-icon {
                margin-left: 5px;
            }
        }

        a {
            color: $wzColor;
        }
    }

    main {
        width: 100%;
        min-height: $minHeight;
        // margin: 10px;
        // 

        aside {

            min-height: $minHeight;
            margin:10px;
            border-radius: 20px !important;
            // background-color: ;
           

        }

        section {
            min-height: $minHeight;
            background-color: #E9E9EB;
            color: $wzColor;
            padding: 10px;
            
        }
    }
}

</style>


<script setup lang="ts">
// 导入ref函数
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// 导入侧栏菜单组件
import MyMenu from './components/MyMenu.vue';
import TopBar from './components/TopBar.vue';

// 导入api
import api from './api/http';
// 初始化首页
let token = localStorage.getItem('TOKEN')
let nickName: any = ref('')
let isLogin = ref<boolean>(false)
let dialogVisible: any = ref(false)
const $router = useRouter();
if (token) {
    isLogin.value = true
    nickName.value = localStorage.getItem('NICK_NAME')
    //判断用户登录状态
    api.logged({token}).then(
        content=>{
            // console.log('===>',content);
            let {code}=content;
            // 跳转登录页
            if(code !== 200){
                $router.push({path:'/login'})

            }
           
            
            
        }
    )
}
// 创建退出登录函数
const logoutFn = () => {
    dialogVisible.value = true

}

const comfirFn = () => {
    // 布尔值设置为false
    localStorage.removeItem('TOKEN');
    localStorage.removeItem('NICK_NAME');
    // 隐藏对话框
    dialogVisible = false
    // 延迟跳转登录页
    $router.replace({
        path: '/login'
    })



}

</script>